<!--
 * @Author: Bennty
 * @Date: 2024-10-06 11:06:05
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-10-08 16:49:15
 * @Description: 请填写简介
-->
<template>
    <div class="p-2">
        <el-card shadow="never">
            <el-row :gutter="8" class="mb8">
                <el-col :span="1.5">
                    <el-button type="primary" plain icon="Back" @click="onClickBack">返回上级</el-button>
                </el-col>
            </el-row>
            <el-form :inline="true">
                <el-row>
                    <el-col :span="4">
                        <el-form-item label="刀线名称：">
                            <span>{{ knifeModelData?.knifePlateName }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <el-form-item label="上传日期：">
                            <span>{{ knifeModelData?.createTime }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <el-form-item label="所属分类：">
                            <span>{{ knife_plate_type.filter((item:any)=>item.value == knifeModelData?.knifeType)[0]?.label}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <el-form-item label="刀版总下载次数：">
                            <span>{{ replaceDetails?.totalDownLoadNum || 0 }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <el-form-item label="刀版总使用次数：">
                            <span>{{ replaceDetails?.totalUseNum || 0 }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <el-form-item label="刀版更换次数：">
                            <span>{{ replaceDetails?.replaceNum || 0 }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <el-form-item label="刀版总成本金额">
                            <span>{{ replaceDetails?.replaceAmount }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="knifeModels-container">
                <el-row>
                    <el-col :span="6" v-for="item in replaceDetails?.detailList" :key="item.id">
                        <div class="knifeModel">
                            <span class="knifeModel-info knifeModel-name">
                                {{ item.knifePlateName }}
                            </span>
                            <span class="knifeModel-info">
                                {{ `刀版金额：${item?.knifeAmount}` }}
                            </span>
                            <span class="knifeModel-info">
                                {{ `刀版使用次数：${item?.useNumber}` }}
                            </span>
                            <span class="knifeModel-info">
                                <el-link type="primary" style="font-size:20px">查看详情</el-link>
                            </span>
                            <span :class="`knifeModel-info`">
                                刀版状态：<span :class="`${item?.knifeStatus == '1'?'used':'abandoned'}`">{{ `${item?.knifeStatus == '1'?'使用中':'已废弃'}` }}</span>
                            </span>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { getKnifeModelDetailsApi,getReplaceDetailApi } from '@/api/sj/warehouse/knifeModel';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { knife_plate_type } = toRefs<any>(proxy?.useDict('knife_plate_type'));
const router = useRouter();
const knifeModelData = ref<any>();
const replaceDetails = ref<any>();
const checkDetailsVisible = ref(false);

const knifeModelId = computed(()=>{
    return router.currentRoute.value.fullPath.split('/')[4]
});

const getKnifeModelData = async ()=>{
    const { data } = await getKnifeModelDetailsApi(knifeModelId.value);
    knifeModelData.value = data;
};

const getReplaceDetails = async () => {
    const { data } = await getReplaceDetailApi(knifeModelId.value);
    replaceDetails.value = data;
};

const onClickBack = () => {
    router.back();
};

onMounted(()=>{
    getKnifeModelData();
    getReplaceDetails();
})

</script>

<style scoped lang="scss">
.knifeModels-container{
    .knifeModel{
        border: solid 1px rgb(187, 187, 187);
        border-radius: 10px;
        padding-left: 12px;
        .knifeModel-name{
            margin-top: 5px;
            font-size: 45px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .knifeModel-info{
            display:block;
            font-size: 20px;
            margin-bottom: 8px;
        }
        .used{
            color:yellowgreen
        }
        .abandoned{
            color: red
        }
    }
}
</style>